<template>
  <Head title="发送消息 - Orange Tech" />
  <AdminLayout title="发送消息" subtitle="向用户发送系统通知和重要消息">
    <div class="space-y-6">
      <!-- 发送消息表单 -->
      <div class="bg-white rounded-2xl shadow-sm">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">消息内容</h3>
        </div>
        
        <form @submit.prevent="submitForm" class="p-6 space-y-6">
          <!-- 用户选择 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-3">选择用户</label>
            <div class="space-y-4">
              <!-- 全选选项 -->
              <div class="flex items-center p-3 bg-gray-50 rounded-xl">
                <input
                  type="checkbox"
                  id="select-all"
                  v-model="selectAll"
                  @change="toggleSelectAll"
                  class="h-4 w-4 text-gray-900 focus:ring-gray-900 border-gray-300 rounded"
                />
                <label for="select-all" class="ml-3 text-sm font-medium text-gray-900">全选所有用户</label>
                <span v-if="selectedUserIds.length > 0" class="ml-auto text-sm text-gray-600">
                  已选择 {{ selectedUserIds.length }} 个用户
                </span>
              </div>
              
              <!-- 用户列表 -->
              <div class="max-h-60 overflow-y-auto border border-gray-200 rounded-xl">
                <div v-if="users.length === 0" class="p-8 text-center text-gray-500">
                  <svg class="mx-auto h-8 w-8 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
                  </svg>
                  <p>暂无用户数据</p>
                </div>
                <div v-else class="divide-y divide-gray-200">
                  <div v-for="user in users" :key="user.id" class="flex items-center p-4 hover:bg-gray-50 transition-colors">
                    <input
                      type="checkbox"
                      :id="`user-${user.id}`"
                      v-model="selectedUserIds"
                      :value="user.id"
                      class="h-4 w-4 text-gray-900 focus:ring-gray-900 border-gray-300 rounded"
                    />
                    <label :for="`user-${user.id}`" class="ml-3 flex-1 text-sm text-gray-700 cursor-pointer">
                      <div class="font-medium">{{ user.name }}</div>
                      <div class="text-gray-500">{{ user.email || '未设置邮箱' }}</div>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 消息标题 -->
          <div>
            <label for="title" class="block text-sm font-medium text-gray-700 mb-2">消息标题</label>
            <input
              type="text"
              id="title"
              v-model="form.title"
              class="w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900 transition-colors"
              placeholder="请输入消息标题"
              required
            />
            <p class="mt-1 text-sm text-gray-500">最多100个字符</p>
          </div>

          <!-- 消息内容 -->
          <div>
            <label for="content" class="block text-sm font-medium text-gray-700 mb-2">消息内容</label>
            <textarea
              id="content"
              v-model="form.content"
              rows="6"
              class="w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900 transition-colors resize-none"
              placeholder="请输入消息内容"
              required
            ></textarea>
            <p class="mt-1 text-sm text-gray-500">最多500个字符</p>
          </div>

          <!-- 相关链接（可选） -->
          <div>
            <label for="url" class="block text-sm font-medium text-gray-700 mb-2">相关链接（可选）</label>
            <input
              type="url"
              id="url"
              v-model="form.url"
              class="w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900 transition-colors"
              placeholder="https://example.com"
            />
            <p class="mt-1 text-sm text-gray-500">用户点击消息时可以跳转到此链接</p>
          </div>

          <!-- 操作按钮 -->
          <div class="flex items-center justify-end gap-4 pt-6 border-t border-gray-200">
            <Link
              href="/admin"
              class="px-6 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
            >
              取消
            </Link>
            <button
              type="submit"
              :disabled="processing || selectedUserIds.length === 0"
              class="px-6 py-2 text-sm font-medium text-white bg-gray-900 rounded-xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              <span v-if="processing" class="flex items-center">
                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                发送中...
              </span>
              <span v-else>发送消息</span>
            </button>
          </div>
        </form>
      </div>

    </div>
  </AdminLayout>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { Head, Link, router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { useNotification } from '@/composables/useNotification'

const props = defineProps({
  users: { type: Array, default: () => [] }
})

const { showSuccess, showError } = useNotification()

const processing = ref(false)
const selectAll = ref(false)
const selectedUserIds = ref([])

const form = reactive({
  title: '',
  content: '',
  url: ''
})

// 全选/取消全选
const toggleSelectAll = () => {
  if (selectAll.value) {
    selectedUserIds.value = props.users.map(user => user.id)
  } else {
    selectedUserIds.value = []
  }
}

// 监听选中用户变化，更新全选状态
const updateSelectAll = () => {
  selectAll.value = selectedUserIds.value.length === props.users.length && props.users.length > 0
}

// 提交表单
const submitForm = () => {
  if (selectedUserIds.value.length === 0) {
    showError('请选择至少一个用户')
    return
  }

  processing.value = true

  router.post(route('admin.notifications.send'), {
    user_ids: selectedUserIds.value,
    title: form.title,
    content: form.content,
    url: form.url
  }, {
    onSuccess: () => {
      // 重置表单
      form.title = ''
      form.content = ''
      form.url = ''
      selectedUserIds.value = []
      selectAll.value = false
    },
    onError: (errors) => {
      showError('发送失败', errors.message || '请重试')
    },
    onFinish: () => {
      processing.value = false
    }
  })
}

// 监听选中用户变化
watch(selectedUserIds, updateSelectAll, { deep: true })
</script>